import Taro, { Component } from '@tarojs/taro'
import { View, Text, Swiper, SwiperItem, Map, ScrollView } from '@tarojs/components'
import './index.scss'
import { AtButton, AtFab, AtCard, AtInputNumber, AtImagePicker, AtTabs, AtTabsPane, AtPagination, AtActivityIndicator, AtList, AtListItem, AtMessage } from 'taro-ui'
import AtTabBar_index from '../../components/AtTabBar_index';
// 引入SDK核心类
import requets from '../../service/api';
var QQMapWX = require('../../assets/qqmap-wx-jssdk1.2/qqmap-wx-jssdk');
var yiyuan_icon = require('../../assets/img/yiyuan_icon.png')
var tongyi = require('../../assets/img/tongyi.png')
var jujue = require('../../assets/img/jujue.png')
var shenhe = require('../../assets/img/shenhe.png')

var di = require('../../assets/img/di.png')
var zhong = require('../../assets/img/zhong.png')
var gao = require('../../assets/img/gao.png')
// 实例化API核心类
var qqmapsdk = new QQMapWX({
  key: 'D43BZ-P7MKO-N4TWG-SGR4H-SLJIE-YAFTN' // 必填
});
Date.prototype.format = function (fmt) {
  var o = {
    "M+": this.getMonth() + 1,                 //月份 
    "d+": this.getDate(),                    //日 
    "h+": this.getHours(),                   //小时 
    "m+": this.getMinutes(),                 //分 
    "s+": this.getSeconds(),                 //秒 
    "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
    "S": this.getMilliseconds()             //毫秒 
  };
  if (/(y+)/.test(fmt)) {
    fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
  }
  for (var k in o) {
    if (new RegExp("(" + k + ")").test(fmt)) {
      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    }
  }
  return fmt;
}

export default class Index extends Component {
  config = {
    navigationBarTitleText: '医疗废物收运助手'
  }
  state = {
    ListData1: [],
    ListData2: [],
    current: 1,
    rows:10,
    currentAtTabs: 0,
    dargStyle: {//下拉框的样式
      top: 0 + 'px'
    },
    downDragStyle: {//下拉图标的样式
      height: 0 + 'px'
    },
    downText: '下拉刷新',
    upDragStyle: {//上拉图标样式
      height: 0 + 'px'
    },
    pullText: '上拉加载更多',
    start_p: {},
    scrollY: true,
    dargState: 0//刷新状态 0不做操作 1刷新 -1加载更多
  }

  componentWillMount() { }

  componentDidMount() {
    Taro.getStorage({
      key: 'userId',
      success: (res) => {
        this.setState({
          userId: res.data
        }, () => {
          this.pagingQueryCollectorRecord()
        })
      }
    })
  }

  pagingQueryCollectorRecord = (page, rows) => {
    if (this.state.currentAtTabs == 0) {
      let params = {
        collectorDate: new Date().format("yyyy-MM-dd"),
        hospitalId: '',
        level: '',
        page: 1,
        rows: this.state.rows,
        status: 0,
        userId: this.state.userId
      }
      requets.baseOptions({
        url: `/zjn-web/zjn/collector/dispatch/pagingQuery`,
        method: 'POST',
        data: params
      }).then((res) => {
        console.log(res)
        if (res.data.rc === 0) {
          if (res.data.ret.items.length > 0) {
            res.data.ret.items.forEach((item) => {
              item.url = item.level == '1' ? di : item.level == '2' ? zhong : gao
              item.time = new Date(item.createTime).format("yyyy-MM-dd hh:mm:ss");
            })
            this.setState({
              ListData1: res.data.ret.items,
              count: res.data.ret.count
            })
            if (!res.data.ret.count) {
              this.onhandleClicks('', '暂无数据')
            } else {
              if (res.data.ret.count / 10 > 1) {

              } else {
                this.onhandleClicks('', '暂无更多数据')
              }
            }

          } else {
            this.setState({
              ListData1: res.data.ret.items,
              count: res.data.ret.count
            })
            this.onhandleClicks('', '暂无数据')
          }

        }
      })
    }else{
      let params = {
        page: 1,
        rows: this.state.rows,
      }
      requets.baseOptions({
        url: `/zjn-web/zjn/collector/dispatch/pagingQueryCollectorRecord`,
        method: 'POST',
        data: params
      }).then((res) => {
        console.log(res)
        if (res.data.rc === 0) {
          if (res.data.ret.items.length > 0) {
            res.data.ret.items.forEach((item) => {
              item.url = item.auditType == '1' ? shenhe : item.auditType == '2' ? tongyi : jujue
              item.time = new Date(item.createTime).format("yyyy-MM-dd hh:mm:ss");
            })
            this.setState({
              ListData2: res.data.ret.items,
              count: res.data.ret.count
            })
            if (!res.data.ret.count) {
              this.onhandleClicks('', '暂无数据')
            } else {
              if (res.data.ret.count / 10 > 1) {

              } else {
                this.onhandleClicks('', '暂无更多数据')
              }
            }

          } else {
            this.setState({
              ListData2: res.data.ret.items,
              count: res.data.ret.count
            })
            this.onhandleClicks('', '暂无数据')
          }

        }
      })
    }

  }

  componentWillUnmount() { }
  onhandleClicks = (type, text) => {
    Taro.atMessage({
      'message': text,
      'type': type,
    })
  }
  componentDidShow() { }

  componentDidHide() { }

  handleClick(value) {
    this.setState({
      currentAtTabs: value,
      rows:10
    },() => {
      this.pagingQueryCollectorRecord()
    })
  }

  reduction() {//还原初始设置
    const time = 0.5;
    this.setState({
      upDragStyle: {//上拉图标样式
        height: 0 + 'px',
        transition: `all ${time}s`
      },
      dargState: 0,
      dargStyle: {
        top: 0 + 'px',
        transition: `all ${time}s`
      },
      downDragStyle: {
        height: 0 + 'px',
        transition: `all ${time}s`
      },
      scrollY: true
    })
    setTimeout(() => {
      this.setState({
        dargStyle: {
          top: 0 + 'px',
        },
        upDragStyle: {//上拉图标样式
          height: 0 + 'px'
        },
        pullText: '上拉加载更多',
        downText: '下拉刷新'
      })
    }, time * 1000);
  }
  touchStart(e) {
    this.setState({
      start_p: e.touches[0]
    })
  }
  touchmove(e) {
    let that = this
    let move_p = e.touches[0],//移动时的位置
      deviationX = 0.30,//左右偏移量(超过这个偏移量不执行下拉操作)
      deviationY = 70,//拉动长度（低于这个值的时候不执行）
      maxY = 100;//拉动的最大高度

    let start_x = this.state.start_p.clientX,
      start_y = this.state.start_p.clientY,
      move_x = move_p.clientX,
      move_y = move_p.clientY;


    //得到偏移数值
    let dev = Math.abs(move_x - start_x) / Math.abs(move_y - start_y);
    if (dev < deviationX) {//当偏移数值大于设置的偏移数值时则不执行操作
      let pY = Math.abs(move_y - start_y) / 3.5;//拖动倍率（使拖动的时候有粘滞的感觉--试了很多次 这个倍率刚好）
      if (move_y - start_y > 0) {//下拉操作
        if (pY >= deviationY) {
          this.setState({ dargState: 1, downText: '释放刷新' })
        } else {
          this.setState({ dargState: 0, downText: '下拉刷新' })
        }
        if (pY >= maxY) {
          pY = maxY
        }
        this.setState({
          dargStyle: {
            top: pY + 'px',
          },
          downDragStyle: {
            height: pY + 'px'
          },
          scrollY: false//拖动的时候禁用
        })
      }
      if (start_y - move_y > 0) {//上拉操作
        console.log('上拉操作')
        if (pY >= deviationY) {
          this.setState({ dargState: -1, pullText: '释放加载更多' })
        } else {
          this.setState({ dargState: 0, pullText: '上拉加载更多' })
        }
        if (pY >= maxY) {
          pY = maxY
        }
        this.setState({
          dargStyle: {
            top: -pY + 'px',
          },
          upDragStyle: {
            height: pY + 'px'
          },
          scrollY: false//拖动的时候禁用
        })
      }

    }
  }
  pull() {//上拉
    console.log('上拉')
    // this.props.onPull()
    console.log('上拉')
    // this.props.onPull()
    let rows = this.state.rows+10
    this.setState({
      rows
    },() => {
      this.pagingQueryCollectorRecord()
    })
  }
  down() {//下拉
    console.log('下拉')
    // this.props.onDown()
    let rows = 10
    this.setState({
      rows
    },() => {
      this.pagingQueryCollectorRecord()
    })
  }
  ScrollToUpper() { //滚动到顶部事件
    console.log('滚动到顶部事件')
    // this.props.Upper()
  }
  ScrollToLower() { //滚动到底部事件
    console.log('滚动到底部事件')
    // this.props.Lower()
  }
  touchEnd(e) {
    if (this.state.dargState === 1) {
      this.down()
    } else if (this.state.dargState === -1) {
      this.pull()
    }
    this.reduction()
  }

  onIndex = (item) => {
    Taro.navigateTo({
      url: `/pages/details/index?hospitalId=${item.hospitalId}&hospitalName=${item.hospitalName}&hospitalAddress=${item.time}&pages=收集上报&next=renwu`
    })
  }


  onNext = (item) => {
    Taro.navigateTo({
      url: `/pages/details/index?recordId=${item.recordId}&pages=历史查询`
    })
  }

  render() {
    const { value_AtInputNumber, current, currentAtTabs, ListData1 ,ListData2} = this.state
    const tabList = [{ title: '未收集' }, { title: '已收集' }]
    let dargStyle = this.state.dargStyle;
    let downDragStyle = this.state.downDragStyle;
    let upDragStyle = this.state.upDragStyle;
    let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
    return (
      <View className='index'>
        <AtMessage />
        <AtTabBar_index current={current} />

        <AtTabs current={currentAtTabs} tabList={tabList} onClick={this.handleClick.bind(this)}>
          <AtTabsPane current={currentAtTabs} index={0} >
            <View className="tab1" >
              {/* <View style='width:100%;height:20vh;background:#993;' >aaaaaaaa</View> */}
              <View className='dragUpdataPage'>
                <View className='downDragBox' style={downDragStyle}>
                  <AtActivityIndicator></AtActivityIndicator>
                  <Text className='downText'>{this.state.downText}</Text>
                </View>
                <ScrollView
                  style={dargStyle}
                  onTouchMove={this.touchmove}
                  onTouchEnd={this.touchEnd}
                  onTouchStart={this.touchStart}
                  onScrollToUpper={this.ScrollToUpper}
                  onScrollToLower={this.ScrollToLower}
                  className='dragUpdata'
                  scrollY={this.state.scrollY}
                  scrollWithAnimation>
                  <View style='width:100%;height:82vh;' >
                    <AtList>
                      {
                        ListData1.map((item, idnex) => {
                          return (
                            <AtListItem
                              key={index}
                              title={item.hospitalName}
                              note={item.time + `  ` + item.collectorBucketNum + `桶 ` + `  ` }
                              // extraText='详细信息'
                              // arrow='right'
                              thumb={item.url}
                              onClick={this.onIndex.bind(this,item)}
                            />
                          )
                        })
                      }

                    </AtList>
                  </View>
                </ScrollView>
                <View className='upDragBox' style={upDragStyle}>
                  <AtActivityIndicator></AtActivityIndicator>
                  <Text className='downText'>{this.state.pullText}</Text>
                </View>
              </View>
            </View>
          </AtTabsPane>
          <AtTabsPane current={currentAtTabs} index={1} >
            <View className="tab1" >
              {/* <View style='width:100%;height:20vh;background:#993;' >aaaaaaaa</View> */}
              <View className='dragUpdataPage'>
                <View className='downDragBox' style={downDragStyle}>
                  <AtActivityIndicator></AtActivityIndicator>
                  <Text className='downText'>{this.state.downText}</Text>
                </View>
                <ScrollView
                  style={dargStyle}
                  onTouchMove={this.touchmove}
                  onTouchEnd={this.touchEnd}
                  onTouchStart={this.touchStart}
                  onScrollToUpper={this.ScrollToUpper}
                  onScrollToLower={this.ScrollToLower}
                  className='dragUpdata'
                  scrollY={this.state.scrollY}
                  scrollWithAnimation>
                  <View style='width:100%;height:82vh;' >
                    <AtList>
                      {
                        ListData2.map((item, index) => {
                          return (
                            <AtListItem
                              key={index}
                              title={item.hospitalName}
                              note={item.time + `  ` + item.collectorBucketNum + `桶 ` + `  ` + item.collectorWeight + `kg `}
                              // extraText='详细信息'
                              // arrow='right'
                              thumb={item.url}
                              onClick={this.onNext.bind(this,item)}
                            />
                          )
                        })
                      }

                    </AtList>
                  </View>
                </ScrollView>
                <View className='upDragBox' style={upDragStyle}>
                  <AtActivityIndicator></AtActivityIndicator>
                  <Text className='downText'>{this.state.pullText}</Text>
                </View>
              </View>
            </View>
          </AtTabsPane>
        </AtTabs>
      </View>
    )
  }
}
